<!-- src/components/MainLayout.vue -->
<template>
  <div class="main-layout">
    <Navbar class="layout-navbar" />
    <main class="layout-main">
      <router-view />
    </main>
    <Footer class="layout-footer" /> <!-- 假设 Footer 已创建 -->
  </div>
</template>

<script setup>
import Navbar from './Navbar.vue'
import Footer from './Footer.vue' // 引入页脚
</script>

<style scoped>
.main-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.layout-navbar {
  flex-shrink: 0;
}

.layout-main {
  flex: 1;
  padding: 20px;
  background-color: #f5f7fa; /* 全局背景色 */
  overflow-y: auto; /* 确保内容可以滚动 */
}

.layout-footer {
  flex-shrink: 0;
}
/* --- 新增: 响应式设计 ---
     *** 添加针对不同屏幕尺寸的样式 ***
*/
@media (max-width: 1200px) {
  .layout-main {
    padding: 15px;
  }
}

@media (max-width: 992px) {
  .layout-main {
    padding: 10px;
  }
}

@media (max-width: 768px) {
  .layout-main {
    padding: 8px;
  }
}

@media (max-width: 576px) {
  .layout-main {
    padding: 5px;
  }
}
/* --- --- */
</style>
